import React, { useState } from 'react';

type ThemeSpecies = 'light' | 'dark';
type ThemeStyle = {
  [spec in ThemeSpecies]: React.CSSProperties
}
type IThemeContext = {
  themeSpecies?: ThemeSpecies;
  theme?: React.CSSProperties;
  toggleTheme?: () => void;
}

const themes: ThemeStyle = {
  light: {
    background: "#fff",
    color: "#000",
  },
  dark: {
    background: "#171717",
    color: "#fff",
  },
};

export const ThemeContext = React.createContext<IThemeContext>({});

export function ThemeProvider(props: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<ThemeSpecies>('dark');

  function toggleTheme() {
    setTheme(theme === 'light' ? 'dark' : 'light');
  }

  return (
    <ThemeContext.Provider value={{
      themeSpecies: theme,
      theme: themes[theme],
      toggleTheme,
    }}>
      {props.children}
    </ThemeContext.Provider>
  );
}